import React, { Component } from 'react';
import { connect } from 'dva';
import { Col, Form, Input, Row, Select, Tree, message,Card  } from 'antd';
import BTreeSelect from '../../../components/nd_component/BTreeSelect';
const { TreeNode } = Tree;

const { Item: FormItem } = Form;
const Option = Select.Option;
const { Meta } = Card;
@Form.create()
@connect(({ channelMerchantsInfo }) => ({ channelMerchantsInfo }))
export default class ChannelMerchantsInfoAddOrUpdate extends Component {
  state = {
    checkedKeys: [],
  };
  componentDidMount() {
    const { record, dispatch } = this.props;
  }
  okHandler = () => {
    this.props.form.validateFields((err, fields) => {
      if (!err) {
        const dataToSubmit = {
          ...fields,
        };
        this.props.onSubmit(err, dataToSubmit);
      }
    });
  };
  render() {
    const { form, record } = this.props;
    return (
      <Form onSubmit={this.okHandler}>
        {form.getFieldDecorator('id', {
          initialValue: record.id ? record.id : null,
        })(<Input type="hidden" />)}
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={12}>
              <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="渠道商名称">
                {form.getFieldDecorator('channelName', {
                  rules: [{ required: true, message: '请输入供应商名称' }],
                  initialValue: record.channelName ? record.channelName : null,
                })(<Input placeholder="请输入供应商名称" disabled={true} />)}
              </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="身份证号">
              {form.getFieldDecorator('cardNumber', {
                rules: [{ required: true, message: '请输入身份证号' }],
                initialValue: record.cardNumber ? record.cardNumber : null,
              })(<Input placeholder="请输入身份证号" disabled={true} />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="联系人">
              {form.getFieldDecorator('contactsName', {
                rules: [{ required: true, message: '请输入联系人' }],
                initialValue: record.contactsName ? record.contactsName : null,
              })(<Input placeholder="请输入联系人" disabled={true} />)}
            </FormItem>
          </Col>
          <Col span={12}>
              <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="联系电话">
                {form.getFieldDecorator('contactNumber', {
                  rules: [{ required: true, message: '请输入联系电话' }],
                  initialValue: record.contactNumber ? record.contactNumber : null,
                })(<Input placeholder="请输入联系电话" disabled={true} />)}
              </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="微信号">
              {form.getFieldDecorator('wechatNumber', {
                rules: [{ required: true, message: '请输入微信号' }],
                initialValue: record.wechatNumber ? record.wechatNumber : null,
              })(<Input placeholder="请输入微信号" disabled={true} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="微信唯一标识码">
              {form.getFieldDecorator('openId', {
                rules: [{ required: true, message: '请输入微信唯一标识码' }],
                initialValue: record.openId ? record.openId : null,
              })(<Input placeholder="请输入微信唯一标识码" disabled={true} />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="微信头像">
              {form.getFieldDecorator('headPortraitUrl', {
                rules: [{ required: true, message: '请输入微信头像' }],
                initialValue: record.headPortraitUrl ? record.headPortraitUrl : null,
              })(<img alt="example" src={record.headPortraitUrl} style={{ width: '200px' }} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="我的二维码">
              {form.getFieldDecorator('qrcodeUrl', {
                rules: [{ required: true, message: '请输入我的二维码' }],
                initialValue: record.qrcodeUrl ? record.qrcodeUrl : null,
              })(<img alt="example" src={record.qrcodeUrl} style={{ width: '200px' }} />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="状态">
              {form.getFieldDecorator('state', {
                rules: [{ required: true, message: '请输入状态' }],
                initialValue: record.state ? record.state : null,
              })(
                <Select style={{ width: '100%' }}>
                  <Select.Option key="2" value="2">
                    开通
                  </Select.Option>
                  <Select.Option key="3" value="3">
                    禁用
                  </Select.Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} label="会员级别">
              {form.getFieldDecorator('level', {
                rules: [{ required: true, message: '请输入会员级别' }],
                initialValue: record.level ? record.level : null,
              })(
                <Select style={{ width: '100%' }}>
                  <Select.Option key="一级" value="一级">
                    一级
                  </Select.Option>
                  <Select.Option key="二级" value="二级">
                    二级
                  </Select.Option>
                  <Select.Option key="三级" value="三级">
                    三级
                  </Select.Option>
                  <Select.Option key="四级" value="四级">
                    四级
                  </Select.Option>
                  <Select.Option key="五级" value="五级">
                    五级
                  </Select.Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }
}
